import React, { Component } from 'react'
import { Card, Button, Table, Input, Form, Modal, Radio, DatePicker } from 'antd'
import BaseForm from '../../components/BaseForm'
import ETable from '../../components/ETable'
import Utils from '../../utils/Utils'
import Axios from '../../axios'
import moment from 'moment'
import './user.less'
const FormItem = Form.Item
const RadioGroup = Radio.Group;
const { TextArea } = Input;


class User extends Component {
    state = {
        title: '',
        list: [],
        visible: false,
        userInfo: {},
        type: ''
    }
    params = {
        page: 1
    }
    filterSubmit = (params) => {
        this.params = params;
        this.requestList()
    }
    componentDidMount() {
        this.requestList()
    }
    handleClick = (type) => {
        let item = this.state.selectedRows
        if (type == 'create') {
            this.setState({
                type,
                title: '创建员工',
                visible: true
            })

        } else if (type == 'edit') {
            if (!item) {
                Modal.info({
                    title: '提示',
                    content: '请选择一个用户'
                })
            } else {
                this.setState({
                    type,
                    title: '编辑员工',
                    visible: true,
                    userInfo: item
                })
            }
        } else if (type == 'detail') {
            if (!item) {
                Modal.info({
                    title: '提示',
                    content: '请选择一个用户'
                })
                return
            }
            this.setState({
                type,
                title: '员工详情',
                visible: true,
                userInfo: item
            })
        } else if (type == 'delete') {
            if (!item) {
                Modal.info({
                    title: '提示',
                    content: '请选择一个用户'
                })
                return
            }
            let _this = this
            Modal.confirm({
                title: '确定删除',
                content: '确定删除该员工吗',
                onOk(){
                    Axios.ajax({
                        url: '/user/delete',
                        data: {
                            params: {
                                id: item[0].id
                            }
                        }
                    }).then((res)=>{
                        if(res.code == '0'){
                            _this.requestList()
                        }
                    })
                },
                cancelText: '取消',
            });
        }
    }
    handleSubmit = () => {
        let data = this.userForm.props.form.getFieldsValue()
        let type = this.state.type
        Axios.ajax({
            url: type == 'create' ? '/user/add' : '/user/edit',
            data: {
                params: data
            }
        }).then((res) => {
            if (res.code == '0') {
                this.setState({
                    visible: false
                })
                this.userForm.props.form.resetFields();
                this.requestList()
            }
        })
    }
    requestList = () => {
        Axios.ajax({
            url: '/user/list',
            data: {
                params: {
                    page: this.params.page
                }
            }
        }).then((res) => {
            if (res.code == '0') {
                this.setState({
                    list: res.result.item_list
                })
            }

        })
    }
    render() {
        const formList = [
            {
                type: 'INPUT',
                placeholder: '请输入用户名',
                field: 'username',
                inputType: 'text'
            },
            {
                type: 'INPUT',
                placeholder: '请输入密码',
                field: 'userpsd',
                inputType: 'password'
            }
        ]
        const formList_1 = [

        ]
        const columns = [
            {
                title: 'ID',
                dataIndex: 'id',
                key: 'id',
            }, {
                title: '用户名',
                dataIndex: 'username',
                key: 'username',
            }, {
                title: '性别',
                dataIndex: 'sex',
                key: 'sex',
                render: (sex) => {
                    return sex == '1' ? '男' : '女'
                }
            }, {
                title: '状态',
                dataIndex: 'state',
                key: 'state',
                render: (index) => {
                    const state = {
                        '1': '吃素',
                        '2': '黄鳝',
                        '3': '鳊鱼',
                        '4': '红烧肉',
                        '5': '虾',
                        '6': '螃蟹',
                    }
                    return state[index]
                }
            }, {
                title: '爱好',
                dataIndex: 'interest',
                key: 'interest',
                render: (index) => {
                    const interest = {
                        '1': '篮球',
                        '2': '足球',
                        '3': '排球',
                        '4': '气球',
                        '5': '虾球',
                        '6': '蟹脚',
                        '6': '上班',
                    }
                    return interest[index]
                }
            }, {
                title: '是否已婚',
                dataIndex: 'isMarried',
                key: 'isMarried',
                render: (sex) => {
                    return sex == '1' ? '是' : '否'
                }
            }, {
                title: '生日',
                dataIndex: 'birthday',
                key: 'birthday',
            }, {
                title: '地址',
                dataIndex: 'address',
                key: 'address',
            }, {
                title: '早起时间',
                dataIndex: 'time',
                key: 'time',
            },
        ]
        return (
            <div>
                <Card>
                    <BaseForm formList={formList} filterSubmit={this.filterSubmit} />
                </Card>
                <Card>
                    <Button icon="plus" type="primary" onClick={() => this.handleClick('create')}>创建员工</Button>
                    <Button icon="edit" type="primary" onClick={() => this.handleClick('edit')}>编辑员工</Button>
                    <Button type="primary" onClick={() => this.handleClick('detail')}>员工详情</Button>
                    <Button icon="delete" type="danger" onClick={() => this.handleClick('delete')}>删除员工</Button>
                </Card>
                <Card>
                    <ETable
                        updataSelectedItem={Utils.updataSelectedItem.bind(this)}
                        columns={columns}
                        dataSource={this.state.list}
                        rowSelection="radio"
                    />
                </Card>
                <Modal
                    visible={this.state.visible}
                    title={this.state.title}
                    onOk={this.handleSubmit}
                    onCancel={() => {
                        this.userForm.props.form.resetFields();
                        this.setState({ visible: false })
                    }}
                >
                    <UserForm userInfo={this.state.userInfo} type={this.state.type} wrappedComponentRef={(inst) => { this.userForm = inst; }} />
                </Modal>
            </div>
        )
    }
}
export default User

class UserForm extends Component {

    render() {
        const { getFieldDecorator } = this.props.form
        const userInfo = this.props.userInfo[0] || ''
        const type = this.props.type
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 12 },
            },
        };
        return (
            <Form layout="horizontal">
                <FormItem
                    label="用户名"
                    {...formItemLayout}
                >
                    {userInfo && type == 'detail' && type !== 'create'  ? userInfo.username :
                        getFieldDecorator('username', {
                            initialValue: userInfo.username
                        })(
                            <Input placeholder="请输入用户名" />
                            )
                    }
                </FormItem>
                <FormItem
                    label="性别"
                    {...formItemLayout}
                >
                    {
                        userInfo && type == 'detail' && type !== 'create'  ? userInfo.sex :
                            getFieldDecorator('sex', {
                                initialValue: userInfo.sex
                            })(
                                <RadioGroup>
                                    <Radio value={1}>男</Radio>
                                    <Radio value={2}>女</Radio>
                                </RadioGroup>
                                )
                    }
                </FormItem>
                <FormItem
                    label="联系方式"
                    {...formItemLayout}
                >
                    {
                        userInfo && type == 'detail' && type !== 'create' ? userInfo.mobile :
                            getFieldDecorator('mobile', {
                                initialValue: userInfo.mobile
                            })(
                                <Input placeholder="请输入联系方式" />
                                )
                    }
                </FormItem>
                <FormItem
                    label="联系地址"
                    {...formItemLayout}
                >
                    {
                        userInfo && type == 'detail'  && type !== 'create' ? userInfo.address :
                            getFieldDecorator('address', {
                                initialValue: userInfo.address
                            })(
                                <TextArea placeholder="请输入联系方式" autosize={{ minRows: 2, maxRows: 6 }} />
                                )
                    }
                </FormItem>
                <FormItem
                    label="生日"
                    {...formItemLayout}
                >
                    {
                        userInfo && type == 'detail' && type !== 'create'  ? userInfo.birthday :
                            getFieldDecorator('birthday', {
                                initialValue: moment(userInfo.birthday)
                            })(
                                <DatePicker />
                                )
                    }
                </FormItem>
            </Form>
        )
    }
}

UserForm = Form.create({})(UserForm)